<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".myButton1").click(function (){
		$(this).animate({border-bottom: '5'},500);  
	});
});
</script>

<style type="text/css">
.myButton1{
	background-color: #282b32;
	color: #ccc;
	width:200px;
	height: 50px;
	border-bottom: 10px solid #282b32;
	border-radius: 5px;
	box-shadow: 0 5px 15px #aaa;
	
	margin:50px;
}
.myButton1:hover{
	cursor: pointer;
}
.myButton1 label{
	display:block;
	line-height:300%;
	text-align:center;
	background-color: #394048;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	cursor: pointer;
}
</style>

</head>
<body>
<div class="myButton1">
<label> 我是一个按钮</label>
</div>
</body>
</html>